<template>
    <van-nav-bar
        title="购物车"
        left-text="返回"
        left-arrow
        @click-left="bindBack"
    />
    <van-swipe-cell v-for="item in cartStore.list" :key="item.id">
        <van-card :num="item.num" :price="item.price" :title="item.name">
            <template #thumb>
                <div class="g-thumb">
                    <van-checkbox :checked="item.state" @click="cartStore.singleCheck(item.id)"></van-checkbox>
                    <van-image :src="item.url" width="70%"></van-image>
                </div>
            </template>
            <template #footer>
                <van-stepper
                    v-model="item.num"
                    theme="round"
                    button-size="22"
                    disable-input
                />
            </template>
        </van-card>
        <template #right>
            <van-button
                square
                text="删除"
                type="danger"
                @click="bindDelete(item.id)"
            />
        </template>
    </van-swipe-cell>

    <van-submit-bar
        :price="cartStore.totalPrice"
        button-text="生成订单"
        @submit="bindOrderSubmit"
    >
        <van-checkbox :checked="cartStore.stateAll" @click="cartStore.checkAll">全选</van-checkbox>
    </van-submit-bar>
</template>

<script setup lang="ts">
import { useCart } from '@/hooks/cart'
const { cartStore, bindBack,bindDelete, bindOrderSubmit } = useCart()
</script>

<style lang="scss" scoped>
.g-thumb {
    display: flex;
}
</style>
